<template>
  <div class="article-edit-container">
    <van-cell title="我的频道">
      <template #right-icon>
        <!-- <van-tag
            plain
            round
            color="red"
            size="large"
            text-color="red"
            type="primary"
            >编辑</van-tag
          > -->
        <van-button
          round
          text-color="red"
          size="small"
          @click="changebtn = !changebtn"
          >{{ changebtn ? "完成" : "编辑" }}</van-button
        >
      </template>
    </van-cell>

    <van-grid :gutter="10">
      <van-grid-item v-for="(item, index) in myChannels" :key="index">
        <span
          @click="btnshow(index)"
          slot="text"
          :class="{ active: index == activeIndex }"
          >{{ item.name }}</span
        >
        <van-icon
          @click="delbtn(item, index)"
          id="iconn"
          v-if="changebtn"
          slot="icon"
          name="clear"
        />
      </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" />
    <van-grid :gutter="10">
      <van-grid-item
        @click="addtjchannel(item1)"
        v-for="(item1, index1) in tjchannels"
        :key="index1"
      >
        <span class="pindaoiconn">+</span>
        {{ item1.name }}
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
//vuex中的数据

import { mapState } from "vuex";
import { allchannelsApi, delchannelsApi } from "@/api";
import { log } from "util";
import { setItem } from "../../../utils/storage.js";

export default {
  props: {
    myChannels: {
      type: Array,
      default: () => {
        return [];
      }
    },
    activeIndex: {
      type: Number
    }
  },
  data() {
    return {
      //全部频道
      allchannels: [],
      //编辑 完成按钮切换
      changebtn: false,
      //我的频道中不能删除的 推荐模块
      fiexChannel: [0]
    };
  },
  methods: {
    //获取全部频道
    async allchannelsApi() {
      const res = await allchannelsApi();
      //   console.log(res, 33333333);
      this.allchannels = res.data.data.channels;
      //   console.log(this.allchannels, 33333333);
    },
    //点击我的频道中的某一个 关闭对话框 触发的时父组件中的事件 子传父
    btnshow(index) {
      this.$emit("popupshow", index);
    },
    //点击我的频道中 删除
    async delbtn(item, index) {
      //  判断用户是否登录
      // +  如果登录  就发送请求获取 我的频道
      // +  如果未登录  获取本地缓存
      // + 如果本地缓存有值就直接取，没有就接着发送请求

      //推荐那一项不能删除
      //如果点击那一项的id==this中定义的推荐模块的id 那就直接return
      if (this.fiexChannel == item.id) {
        return;
      }
      /* 
      +  删除
      + 分删除的是高亮前面的还是后面的   
      + 根据是否登录  
        —  如果登录就发请求 没登录就做本地缓存
      */

      /* 
    +  点击当前频道
        + 获取当前频道的索引
        + 根据索引和activeIndex  进行判断
          如果  index<=activeIndex  表示点击的是当前高亮的前面频道或者是自己   
          将  activeIndex=activeIndex-1
      */
      if (index <= this.activeIndex) {
        //触发父组件中的事件  子传父
        this.$emit("dellChannel", this.activeIndex - 1);
        // activeIndex = activeIndex - 1;
      }
      this.myChannels.splice(index, 1);
      //判断是否登录
      if (this.user) {
        const res = await delchannelsApi(item.id);
        console.log(res, 999999);
      } else {
        setItem("myChannels", this.myChannels);
      }
    },
    //从频道推荐中添加到我的频道
    addtjchannel(item1) {
      this.myChannels.push(item1);
      //判断有没有登录
      if (this.user) {
        //登录了
      } else {
        //未登录
      }
    }
  },

  //计算属性  计算全部频道-我的频道=频道推荐
  computed: {
    ...mapState(["user"]),
    tjchannels() {
      console.log(this.allchannels, 22222);
      const unfind = [];
      return this.allchannels.filter(channels => {
        var ccc = this.myChannels.find(item => {
          return item.id == channels.id;
        });
        //  将没有找到的追加到  unFind   数组中
        if (!ccc) {
          unfind.push(channels);
          return unfind; //filter的返回值
        }
      });
    }
  },
  created() {
    this.allchannelsApi();
  }
};
</script>
<style scoped lang="less">
.article-edit-container {
  .van-grid {
    .van-grid-item {
      /deep/ .pindaoiconn {
        position: absolute;
        top: 6px;
        left: 10px;
        font-size: 30px;
        color: #888;
      }
    }
  }
  //高亮类名
  .active {
    color: red;
  }
  span {
    font-size: 16px;
  }
  .van-grid {
    .van-grid-item {
      font-size: 16px;
      /deep/.pindaoiconn {
        font-size: 24px;
      }
      /deep/ #iconn {
        // position: unset;
        position: absolute;
        top: -40px;
        right: -90px;
        font-size: 30px;
        color: #888;
      }
    }
  }

  .van-cell {
    padding-top: 80px;
    .van-button--small {
      font-size: 18px;
      width: 100px;
      height: 50px;
      color: red;
      border: 1px solid red;
    }
  }
}
</style>
